Annotation icon

Website Design we're building

Creating React Project

Creating our Project Files

Creating Navbar

Styling Navbar

Creating Sidebar/Dropdown Menu

Styling Sidebar

Creating Home Page

Creating Hero Section

Styling Hero Section

Creating Button Element

Creating Reusable Info Section

Styling Info Section

Adding Data to Info Section

Adding Smooth Scroll to Info Section Buttons

Creating Services Section

Styling Services Section

Creating Sign In Page

Adding React Routes to Website

Creating Footer

Styling Footer

Changing Navbar background on scroll

Adding React Scroll to our site

Creating Sign In Component

Scroll to Top on Page/Route Change

Sync to video time

Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site. If you want to follow me along my coding journey, be sure to subscribe :) https://www.youtube.com/channel/UCsKs... Access Source Code Here (Scroll to bottom of page) https://www.codavilla.com/posts/react...

Timeline 0:00 Website Design we're building 4:26 Creating React Project 9:18 Creating our Project Files 10:44 Creating Navbar 16:10 Styling Navbar 46:51 Creating Sidebar/Dropdown Menu 48:15 Styling Sidebar 1:07:22 Creating Home Page 1:14:21 Creating Hero Section 1:16:55 Styling Hero Section 1:32:50 Creating Button Element 1:43:12 Creating Reusable Info Section 1:47:22 Styling Info Section 2:06:08 Adding Data to Info Section 2:18:43 Adding Smooth Scroll to Info Section Buttons 2:33:18 Creating Services Section 2:37:06 Styling Services Section 2:47:53 Creating Sign In Page 2:48:39 Adding React Routes to Website 2:52:08 Creating Footer 2:59:15 Styling Footer 3:20:18 Changing Navbar background on scroll 3:24:52 Adding React Scroll to our site 3:34:20 Creating Sign In Component 3:38:52 Scroll to Top on Page/Route Change Host your React Website for Free https://youtu.be/C0CNIhRzhYg VS Code Theme I use https://youtu.be/6etaWaiMkvM React Website with Styled Components using only React Router https://youtu.be/iP_HqoCuRI0

Website Design we're building

Creating React Project

Creating our Project Files

Creating Navbar

React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive

825,412 views825K views

Oct 3, 2020

85.5K subscribers

Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site. If you want to follow me along my coding journey, be sure to subscribe :) https://www.youtube.com/channel/UCsKs... Access Source Code Here (Scroll to bottom of page) https://www.codavilla.com/posts/react...

Timeline 0:00 Website Design we're building 4:26 Creating React Project 9:18 Creating our Project Files 10:44 Creating Navbar 16:10 Styling Navbar 46:51 Creating Sidebar/Dropdown Menu 48:15 Styling Sidebar 1:07:22 Creating Home Page 1:14:21 Creating Hero Section 1:16:55 Styling Hero Section 1:32:50 Creating Button Element 1:43:12 Creating Reusable Info Section 1:47:22 Styling Info Section 2:06:08 Adding Data to Info Section 2:18:43 Adding Smooth Scroll to Info Section Buttons 2:33:18 Creating Services Section 2:37:06 Styling Services Section 2:47:53 Creating Sign In Page 2:48:39 Adding React Routes to Website 2:52:08 Creating Footer 2:59:15 Styling Footer 3:20:18 Changing Navbar background on scroll 3:24:52 Adding React Scroll to our site 3:34:20 Creating Sign In Component 3:38:52 Scroll to Top on Page/Route Change Host your React Website for Free https://youtu.be/C0CNIhRzhYg VS Code Theme I use https://youtu.be/6etaWaiMkvM React Website with Styled Components using only React Router https://youtu.be/iP_HqoCuRI0

Website Design we're building

Creating React Project

Creating our Project Files

Creating Navbar

Styling Navbar

Creating Sidebar/Dropdown Menu

Show less

Pinned by Brian Design

David

Great tutorial! I bought the source code, hope you can continue doing this and making new awesome vids.

View 21 replies from Brian Design and others

Syndrms

Very rare to see react tutorials with actually good designs. You deserve the best, thank you for your amazing videos <3.

View 4 replies from Brian Design and others

seXRP

That was great! I've never used styled components before and all the repetition and patterns you've demonstrated truly helped me build a strong foundation! Thank you!

JRose

Bro I'm only like halfway through but this tutorial is clicking so much more for me than other, much longer and more in depth tutorials. I think maybe it's the order you are going through, combined with the pace. So relieved, finally this React stuff is starting to click in my boomer object oriented brain. Thank you.

Cameron Arnold

If you're having any issues with margins, instead of removing the App.css file, delete everything inside and replace it with *{margin: 0px; padding: 0px}. This will remove all default margins, and give you more freedom to work.

Giulio

1 year ago (edited)

Great video tutorial! Seriously the effort you've put in creating this content is second to none! Great Job mate!

View reply from Brian Design

RemyFamily

Awesome tutorial! Fellow developers, in case you want to add extra pages like a signup you need to add a few thing extra props onto your styled-component. Example: <SignUpText as="a" href="/signup>Enter Text Here></SignUpText> You can have your styled-components act as something else in this case we added "as" and said to act like an a tag. If you plan to deploy to Netlify, continue reading... You might receive a 404 error when navigating to other pages to fix this you need create a file called "netlify.toml" and add the following: [[redirects]] from = "/*" to = "/index.html" status = 200 Just redeploy and you will be all good to go!

Read more

AnythingFX

Hi Brian, your tutorials and design is awesome! Have one question, when you change navbar color with the addEventListener on scroll, shouldnt there be a cleanup function with that listener? And hows performance of that if you trigger that function on scroll? Any option for debounce? Thanks!

Renat Ilyasov

For the svg loading problem I noticed that in InfoElements.js I wrote "styled.div" instead of "styled.img". Great tutorial! Thanks

View 4 replies from Brian Design and others

DIDACTICS

hint: if the images aren't loading in your react, use .default suffix to your img value/path

Octavian

Great work. A request, could you display the output on the screen as you code. It would help a lot in understanding more of what's happening.

Karthikeyan Subramanian

Unlike other channels, you not only teach React, but also focus on the design part of it which is immensely helpful. Thanks a ton, expecting more amazing content :D

View 3 replies from Brian Design and others

CaseysLastGram

Thanks for all you do man, I appreciate you walking through your errors makes it feel more authentic.

Mustafa Bahaa

for anyone having issue with image not loaded make sure you type img: require('../../images/svg-1.svg').default,

View 80 replies

Joe Loftus

This is pretty much a great build. You pretty much covered a lot of stuff. You should pretty much keep making stuff like this! ;)

HJ Miranda

I just finished the tutorial and it took me at least 3 days. Awesome tutorial and I love how you debug the problems! New subscriber here!

Ante Zivkovic

I love that we just go through the code and debug along the way. It really adds to realism!

Matej Zmaj

Really amazing work man, I recently created my first mern project to show employers and next was thinking about making portfolio page, this video is inspiring, might create something similar, looking forward to see how you solved some parts! Cheers

View reply from Brian Design

Adam Meziti

Brian, you do more for us than you realize. Bought your bundle in the hopes that you're going to continue to make great content!

Caroline Mendez

Your React using Styled Components have been a life saver. Hoping you do an ecommerce type of website soon! Would love to see what you do with that style

View reply from Brian Design